<template>
	<el-dialog
		:before-close="handleClose"
		:title="textInfo.title"
		:visible.sync="dialog"
		:append-to-body="true"
		center
		width="500px"
		class="update-pass background-layer"
		:destroy-on-close="true"
		@close="handleClose"
	>
		<el-table :data="tableData" label-width="auto">
			<el-table-column
				align="center"
				:label="textInfo.card"
				min-width="150"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.serviceChargeHandContribution
						) || '-'
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="textInfo.game"
				min-width="150"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.serviceChargeRoundContribution
						) || '-'
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="textInfo.amount"
				min-width="150"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.currency,
							scope.row.serviceAmountContribution
							// row.amount || row.validBetAmount
						)
					}}
					<!-- {{ getAmount(scope.row) || '-' }} -->
				</template>
			</el-table-column>
		</el-table>
		<span slot="footer" class="elDialog-footer">
			<el-button @click="handleClose">
				{{ $t('common.close_dialog') }}
			</el-button>
		</span>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import i18n from '@/locales'
const getText = (flag) => ({
	title: i18n.t(`common.service_charge${flag}`),
	card: i18n.t(`common.card_service_charge${flag}`),
	game: i18n.t(`common.game_service_charge${flag}`),
	amount: i18n.t(`common.service_charge${flag}`)
})
export default {
	name: 'ServiceChargeDetail',
	mixins: [list],
	props: {
		dialog: Boolean,
		kind: {
			type: String,
			default: ''
		},
		tableData: {
			type: Array,
			default: () => {}
		},
		handleClose: {
			type: Function,
			default: () => Void
		},
		from: {
			type: String,
			default: ''
		},
		module: {
			type: String,
			default: ''
		}
	},
	computed: {
		textInfo() {
			let flag = '_contribute'
			// if (this.module === 'funds') flag += '_contribute'
			if (this.kind === 'team') flag += '_team'
			return getText(flag)
		}
	}
	// methods: {
	// 	getAmount(row) {
	// 		switch (this.from) {
	// 			case 'commission':
	// 				return this.handleNumber(
	// 					row.currency,
	// 					row.serviceAmountContribution
	// 					// row.teamServiceAmount
	// 				)
	// 			case 'member':
	// 				return this.handleNumber(
	// 					row.currency,
	// 					row.serviceAmountContribution
	// 				)
	// 			// case 'proxy':
	// 			// case 'reports':
	// 			default:
	// 				return this.handleNumber(
	// 					row.currency,
	// 					row.serviceAmountContribution
	// 					// row.amount || row.validBetAmount
	// 				)
	// 		}
	// 	}
	// }
}
</script>

<style lang="scss" scoped>
.background-layer {
	background-color: rgba(0, 0, 0, 0.5);
}
</style>
